<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>电子围栏</title>

    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style>
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
      }

      .amap-icon img {
        width: 25px;
        height: 34px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="panel"></div>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "5dfaddb510ffa01104ce9c25166f7f53",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=8ed6ab55d9456bfe6c1d020ce9b2a1c9"
    ></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=8ed6ab55d9456bfe6c1d020ce9b2a1c9&plugin=AMap.Walking"></script>
    <script type="text/javascript">
      const lng = 116.24381381318199;
      const lat = 40.07861862820973;
      let map = new AMap.Map("container", {
        center: [116.24381381318199, 40.07861862820973],
        zoom: 14,
      });

      const circle = new AMap.Circle({
        center: [lng, lat],
        radius: 300, //半径
        borderWeight: 3,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeStyle: "dashed",
        strokeDasharray: [10, 10],
        fillColor: "#1791fc",
        zIndex: 50,
      });

      const r = 6371000;
      const phase = (2 * Math.PI) / 360;
      let pointArr = [];
      let LngLatArr = [];
      for (let i = 0; i < 360; i += 45) {
        let newLng =
          lng +
          (300 * Math.cos(i * phase)) /
            ((r * Math.cos((lat * Math.PI) / 180) * Math.PI) / 180);
        let newLag = lat + (300 * Math.sin(i * phase)) / ((r * Math.PI) / 180);
        LngLatArr.push([newLng, newLag]);

        let startIcon = new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: "dir-marker.png",
          imageSize: new AMap.Size(135, 40),
          imageOffset: new AMap.Pixel(-9, -3),
        });
        const marker = new AMap.Marker({
          position: [newLng, newLag],
          icon: startIcon,
          offset: new AMap.Pixel(-13, -30),
        });
        pointArr.push(marker);
      }

      LngLatArr.push(LngLatArr[0]);

      let pathResult = [];
      LngLatArr.forEach(async (item, i) => {
        let walking = new AMap.Walking({});
        await walking.search(
          LngLatArr[i],
          LngLatArr[i + 1],
          async function (status, result) {
            if (status === "complete") {
              pathResult.push(result);
              console.info("步行路线数据查询成功");
            } else {
              console.info("步行路线数据查询失败" + result);
            }
          }
        );
      });

      setTimeout(() => {
        let map = new AMap.Map("container", {
          center: [116.397504, 39.89619],
          zoom: 14,
        });
        let pathArr = [];
        let pathRawArr = [];
        let kneePoint = {};
        pathResult.flatMap((term) => {
          term.routes[0].steps.flatMap((item, index) => {
            item.path.flatMap((pos) => {
              pathRawArr.push([pos.lng, pos.lat]);
              key = "" + pos.lng + pos.lat;
              if (!(key in kneePoint)) {
                pathArr.push([pos.lng, pos.lat]);
                kneePoint[key] = {};
              }
            });
          });
        });
        let polygon = new AMap.Polygon({
          path: pathRawArr,
          strokeColor: "#1E9FFF",
          strokeWeight: 2,
          strokeStyle: "dashed",
          strokeOpacity: 1,
          fillOpacity: 0.1,
          fillColor: "#1E9FFF",
          zIndex: 50,
        });

        map.add(polygon);
        map.setFitView([polygon]);
      }, 500);
    </script>
  </body>
</html>
